NextJS기초_01_NextJS 시작하기

1. Next.js란?

Next.js는 리액트(React) 라이브러리를 기반으로 구축된 풀스택 웹 프레임워크이다.
리액트가 "UI를 만들기 위한 라이브러리"라면, Next.js는 그 리액트를 사용하여 실제 프로덕션 수준의 애플리케이션을 만들기 위해 필요한 툴링과 기능을 갖춘 "프레임워크"라고 할 수 있다.

주요 특징

• 하이브리드 렌더링:
  • 서버 사이드 렌더링(SSR): 요청 시마다 서버에서 HTML을 생성하여 전송. 최신 데이터가 필요한 동적 페이지에 적합.
  • 정적 사이트 생성(SSG): 빌드 시점에 HTML을 미리 생성. 블로그나 문서처럼 내용이 변하지 않는 페이지에 유리(빠른 로딩).
  • 클라이언트 사이드 렌더링(CSR): 브라우저에서 자바스크립트로 화면을 렌더링. 사용자 상호작용(클릭, 입력 등)이 많은 컴포넌트에 사용.
• App Router & RSC:
  • 리액트 서버 컴포넌트(RSC): 서버에서 컴포넌트를 렌더링하여 클라이언트로 전송. 자바스크립트 번들 크기를 줄이고 데이터 페칭 효율을 높임.
  • 파일 시스템 기반 라우팅: app 폴더 내의 파일 구조가 곧 URL 경로가 되는 직관적인 시스템.
• 타입스크립트(TypeScript) 지원:
  • 별도의 복잡한 설정(tsconfig.json 등)을 자동으로 처리해줌.
  • API 라우트나 데이터 페칭 함수 등에서 강력한 타입 추론과 안정성을 제공.
• 이미지 최적화: next/image 컴포넌트를 사용하여 디바이스 크기에 맞는 이미지를 자동으로 서빙하고 로딩 속도를 최적화.

시스템 요구사항

Next.js 14/15 버전을 사용하기 위해서는 다음 환경이 필요하다.

• Node.js: 18.17 버전 이상
• OS: macOS, Windows (WSL2 권장), Linux

2. 프로젝트 생성(자동 설치)

create-next-app CLI 도구를 사용하면 빠르게 프로젝트를 시작할 수 있다.

npx create-next-app@latest

명령어를 입력하면 다음과 같은 설정 질문들이 나온다.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes

• App Router: 최신 Next.js의 핵심 기능이므로 Yes 권장.
• TypeScript: 모던 웹 개발의 표준이므로 Yes 권장.
• Tailwind CSS: 스타일링 생산성을 위해 Yes 권장 (취향에 따라 선택).

3. 프로젝트 구조(App Router 기준)

설치가 완료되면 다음과 같은 디렉터리 구조가 생성된다.

my-app/
├── app/                  # 핵심 라우트 및 페이지 파일
│   ├── layout.tsx        # 전체 레이아웃(Root Layout)
│   ├── page.tsx          # 메인 페이지(/)
│   ├── globals.css       # 전역 스타일
├── public/               # 정적 파일(이미지, 폰트 등)
├── next.config.js        # Next.js 설정 파일
├── package.json          # 의존성 및 스크립트 관리
├── tsconfig.json         # 타입스크립트 설정

4. 개발 서버 실행

프로젝트 디렉터리로 이동하여 개발 서버를 실행한다.

cd my-app
npm run dev

서버가 실행되면 http://localhost:3000 주소로 접속하여 결과물을 확인할 수 있다.
app/page.tsx 파일을 수정하면 브라우저에 실시간으로 반영된다(Fast Refresh).